<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的提交</title>
</head>
<body>
<!--form 标签就是表单的标签
        ---1---
            input type = text     ：文本输入框  value设置默认显示的内容
            input type = password ：密码输入框  value设置默认显示的内容
            input type = radio    : 单选框      name属性可以对其进行分组，每个组内的选择保持互斥； checked=“checked”表示默认选中、
            input type = checkbox : 复选框      checked = “checked”表示默认选中
            input type = reset    : 重置按钮    value可以修改按钮上的文本
            input type = submit   ：提交按钮    value可以修改按钮文本
            input type = button   ：按钮        value同上
            input type = file     ：文件上传
            input type = hidden   ：隐藏域      发送一些不想让用户看见的信息，但是它会发送数据给后端！

            select 标签下拉列表框
                option 选项中的参数 selected=“selected”设置默认选中

            textarea 标签表示多行文本输入，起始标签和结束标签之间的内容表示默认值
                rows  属性设置可以显示几行的高度
                clos  属性设置每行可以显示几个字符宽度
        ---2---
            重点：关于表单提交的细节
              form标签
                action属性设置提交的服务器地址
                method属性设置提交方式GET（默认）或者POST

              当表单提交的时候，数据没有发送给服务器的三种情况：
                  此链接是示例：http://localhost:8080/?action=login&sex=on
                                http://localhost:8080/   form标签action的属性值
                                ?                        分隔符
                                action=login&sex=on      请求参数（表单的信息）

                1.表单项没有name属性
                2.单选或者复选框（下拉列表中的option标签）都需要value属性，以便发送给服务器
                3.表单项不在提交的form标签中，比如写到了<form></form>外部
                          下面的示例只写了 name 属性  但是缺少有效信息，比如单选框复选框的，缺少value属性
                                http://localhost:8080/
                                ?
                                action=login
                                &
                                userName=%E9%BB%98%E8%AE%A4%E5%80%BC
                                &
                                password=abc
                                &
                                password=abc
                                &
                                sex=on&hobby=on&hobby=on
                                &
                                country=2.%E4%B8%AD%E5%9B%BD
        ---3---
              GET请求的特点：
                1.浏览器地址栏中的地址是：action属性【？+请求参数】  请求参数的格式比较固定： name=value&name=vlaue
                2.不安全，明文传输
                3.有长度限制，100字符以内

              POST请求特点：
                1.浏览器地址中只有action属性
                2.相较于get来说比较安全
                3.理论上没有数据长度限制

-->

<form action="http://localhost:8080" method="post">
  <input type="hidden" name="action" value="login"/>
  <h3 align="center">用户登录</h3>
  <table align="center">
    <tr>
      <td>用户名称：</td>
      <td><input type="text" name="userName" value="admin"/></td>
    </tr>
    <tr>
      <td>用户密码：</td>
      <td><input type="password" name="password" value="admin"/></td>
    </tr>
    <tr>
      <td>确认密码：</td>
      <td><input type="password" name="password" value="admin"/></td>
    </tr>
    <tr>
      <td>性    别：</td>
      <td><input type="radio" name="sex" value="man" checked="checked"/>男 <input type="radio" name="sex" value="woman" />女</td>
    </tr>
    <tr>
      <td>兴趣爱好：</td>
      <td><input type="checkbox" name="hobby" value="java" checked="checked"/>java <input type="checkbox" name="hobby" value="cpp" checked="checked"/>C++
        <input type="checkbox" name="hobby" value="others" />others</td>
    </tr>
    <tr>
      <td>国    籍：</td>
      <td>
        <select name="country">
        <option value="none">--请选择国籍--</option>
        <option value="alien">1.外星人</option>
        <option value="cn" selected="selected">2.中国</option> <!-- 默认选中项设置-->
        <option value="usa">3.美国</option>
        </select></td>
    </tr>
    <tr>
      <td>自我评价：</td>
      <td><textarea rows="10" cols="20">这里的文本是默认显示，可设置默认显示内容</textarea></td>
    </tr>
    <tr>
      <td><input type="reset"/></td>
      <td align="center"><input type="submit"/></td>
    </tr>
  </table>
</form>

<hr/>

</body>
</html>